<template>
  <div class="main">
    <div class="nav">
      <img :src="back" alt="" @click="handleBack" class="back"/>
      <div>饮食习惯</div>
      <!--      <img :src="edit" alt="" @click="handleEdit" />-->
    </div>
    <div class="body">
      <div class="title">每日餐次</div>
      <div class="content">
        <div class="content-item" :class="{ 'selected': activeDinner == indexDetail }"
             v-for="(itemDetail,indexDetail) in dinnerList"
             @click="selectDinner(itemDetail,indexDetail)"
             :key="indexDetail">
          {{ itemDetail.name }}
        </div>
      </div>
    </div>
    <!-- 口味偏好(多选) -->
    <div class="body">
      <div class="title">口味偏好</div>
      <div class="content">
        <!-- :class="{ 'selected': activeTaste== indexDetail }" -->
        <div class="content-item" :class="isActiveTaste(itemDetail) ? 'selected' : ''" 
             v-for="(itemDetail,indexDetail) in tasteList"
             @click="selectTaste(itemDetail,indexDetail)"
             :key="indexDetail">
          {{ itemDetail.name }}
        </div>
      </div>
    </div>
    <div class="body">
      <div class="title">主食偏好</div>
      <div class="content">
        <!-- :class="{ 'selected': activeFood== indexDetail }" -->
        <div class="content-item" :class="isActiveFood(itemDetail) ? 'selected' : ''" 
             v-for="(itemDetail,indexDetail) in foodList"
             @click="selectFood(itemDetail,indexDetail)"
             :key="indexDetail">
          {{ itemDetail.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getFoodType, getTasteType, getDinnerType} from "@/api/my";
import {saveHealthRecord} from "../../../api/my";

export default {
  name: "dietaryRecords",
  data() {
    return {
      back: require("@/assets/my/back.png"),
      // list: [
      //   {name: '每日餐次', list: [{name: '两餐'}, {name: '三餐'}, {name: "三到五餐"}, {name: '无规律'}]},
      //   {name: '口味偏好', list: [{name: '偏甜'}, {name: '偏酸'}, {name: "香辣/麻辣"}, {name: '咸香'}, {name: '清淡'}]},
      //   {name: '主食偏好', list: [{name: '精米白面'}, {name: '有粗粮'}, {name: "不吃主食"}, {name: '水果代替主食'}]},
      // ],
      dinnerList: [],
      tasteList: [],
      foodList: [],
      activeDinner: 0,
      activeTaste: 0,
      activeFood: 0,
      choose: {
        dinnerType: '',//每日餐饮
        dinnerName: '',
        tasteType: '',//口味偏好
        tasteName: '',
        stapleFoodType: '',//主食偏好
        stapleFoodName: '',
      },
      tasteSelected:[],
      tasteIndex:[],
      foodSelected:[],
      foodIndex:[]

    }
  },
  async mounted() {
    this.foodList = await this.getFoodType()
    this.tasteList = await this.getTasteType()
    console.log(this.tasteList)
    this.dinnerList = await this.getDinnerType()
    let obj = this.$route.query.obj
    // this.$toast(`${obj}`)
    if (obj !== null && obj !== undefined) {
      this.activeDinner = this.dinnerList.findIndex(item => item.name == obj.dinnerName)
      this.activeTaste = this.tasteList.findIndex(item => item.name == obj.tasteName)
      this.activeFood = this.foodList.findIndex(item => item.name == obj.stapleFoodName)
      console.log(obj)
      if (obj.tasteName) {//口味偏好==回显
        this.tasteIndex = obj.tasteType.split(',')
        this.tasteSelected = obj.tasteName.split(',')
      }
      if (obj.stapleFoodName) {//主食偏好==回显
        this.foodIndex = obj.stapleFoodType.split(',')
        this.foodSelected = obj.stapleFoodName.split(',')
      }
      
    }
  },
  methods: {
    selectFood(item, indexs) {
      // console.log(item)
      // this.activeFood = index
      // this.choose.stapleFoodName = item.name
      // this.choose.stapleFoodType = item.value
       this.choose.stapleFoodName = ''
       this.choose.stapleFoodType = ''
       const index = this.foodSelected.indexOf(item.name)
      if (index > -1) {
        this.foodSelected.splice(index, 1)
        this.foodIndex.splice(index,1)
      } else {
        this.foodSelected.push(item.name)
        this.foodIndex.push(indexs)
      }
      this.choose.stapleFoodName = String(this.foodSelected)
      this.choose.stapleFoodType = String(this.foodIndex)
      console.log(this.choose.stapleFoodType,this.choose.stapleFoodName)
    },
    selectTaste(item,indexs) {
      this.choose.tasteName = ''
      this.choose.tasteType = ''
       const index = this.tasteSelected.indexOf(item.name)
      if (index > -1) {
        this.tasteSelected.splice(index, 1)
        this.tasteIndex.splice(index,1)
      } else {
        this.tasteSelected.push(item.name)
        this.tasteIndex.push(indexs)
      }
      this.choose.tasteName = String(this.tasteSelected)
      this.choose.tasteType = String(this.tasteIndex)
      console.log(this.choose.tasteType,this.choose.tasteName)
      
    },
    selectDinner(item, index) {
      console.log(item)
      this.activeDinner = index
      this.choose.dinnerName = item.name
      this.choose.dinnerType = item.value
    },
    getFoodType() {
      return new Promise((resolve, reject) => {
        getFoodType().then(res => {
          let foodList = []
          res.data.forEach((item, index) => {
            let obj = {
              name: item.label,
              value: item.value,
              isActive:false
            }
            foodList.push(obj)
          })
          resolve(foodList)
        })
      })
    },
    getTasteType() {
      return new Promise((resolve, reject) => {
        getTasteType().then(res => {
          let tasteList = []
          res.data.forEach((item, index) => {
            let obj = {
              name: item.label,
              value: item.value,
              isActive:false
            }
            tasteList.push(obj)
            
          })
          resolve(tasteList)
        })
      })
    },
    getDinnerType() {
      return new Promise((resolve, reject) => {
        getDinnerType().then(res => {
          let dinnerList = []
          res.data.forEach((item, index) => {
            let obj = {
              name: item.label,
              value: item.value
            }
            dinnerList.push(obj)
          })
          resolve(dinnerList)
        })
      })
    },
    async handleBack() {
      //调保存的接口
      let res = await this.save()
      if (res) {
        this.$router.go(-1)
      } else {
        this.$toast.fail('未保存成功')
      }
    },
    save() {
      console.log('choose', this.choose)
      return new Promise((resolve, reject) => {
        saveHealthRecord(this.choose).then(res => {
          if (res.success) {
            // this.$toast('保存成功')
            resolve(res.data)
          }
        })
      })
    },
    isActiveTaste(item) {
      let flag = false
      this.tasteSelected.forEach(el => {
        if (item.name === el) {
         
          flag = true
        }
      })
      return flag
    },
    isActiveFood(item) {
      let flag = false
      this.foodSelected.forEach(el => {
        if (item.name === el) {
         
          flag = true
        }
      })
      return flag
    },
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  padding: 0px 15px;

  .nav {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    .back {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
  }

  .body {
    margin-top: 30px;

    .title {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 23.17px;
      color: rgba(84, 84, 84, 1);
      text-align: left;
      vertical-align: top;
      border-bottom: 0.45px solid rgba(229, 229, 229, 1);;
    }

    //.content{
    //  padding-top: 12px;
    //  .content-item{
    //    width: 70px;
    //    height: 27px;
    //    line-height: 27px;
    //    text-align: center;
    //    opacity: 1;
    //    border-radius: 13.5px;
    //    border: 1px solid rgba(84, 84, 84, 1);
    //  }
    //}
    .content {
      padding-top: 12px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      //overflow-x: scroll;

      .selected {
        background-color: rgba(242, 150, 0, 1);
        border-color: rgba(242, 150, 0, 1) !important;
        color: #ffffff !important;
      }

      .content-item {
        //flex-shrink: 0;
        // width: calc((100% - 28px) / 4);
        padding: 0 10px;
        height: 27px;
        // margin-right: 6px;
        margin: 0 5px;
        line-height: 25px;
        text-align: center;
        opacity: 1;
        border-radius: 13.5px;
        border: 1px solid rgba(166, 166, 166, 1);
        font-size: 17px;
        font-weight: 400;
        color: rgba(56, 56, 56, 1);
        margin-bottom: 10px;
      }

      // .content-item:nth-of-type(4n + 0) {
      //   margin-right: 0px;
      // }
    }

  }
}
</style>
